<template>
<div class="page_list" ref="page_list" v-loading='loading' element-loading-background="rgba(0, 0, 0, 0.5)" element-loading-text="正在加载">
  <search @change='change'/>
  <div class="zhan"></div>
  <van-pull-refresh class="refresh_div" v-model="refreshing" @refresh="onRefresh">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      class="list_div"
      @load="onLoad"
    >
      <div class="list_item" v-for="(item,index) in list" :key="index" @click="toDetail(item)">
        <div class="flex_sb">
          <div class="item_logo" >
            <img :src="item.thumb" alt="">
          </div>
          <div class="info_div">
            <div class="big_t">{{item.park_name}}</div>
            <div class="small_t "><span class="biao_div">{{item.level_name}} </span> </div>
          </div>
          <div class="fen_div">{{item.type_name}}</div>
        </div>
        <div class="xx_info">{{item.prime_mover_industry}}</div>
        <div class="small_t line_text"><img src="~@/assets/address.png" alt=""> {{item.address}}</div>
      </div>
    </van-list>
  </van-pull-refresh>
  <back />

</div>
</template>
<script>
import search from '../components/search.vue'
import back from '../components/back.vue'

import {parklist} from '@/api/api'
export default {
  components: { search,back },
  data(){
    return{
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      query:{
        keywords:'',
        chain_id:'',
        city_id:'',
        page:0
      },
      top:0
    }
  },
  created(){

  },
  activated(){
    this.$refs.page_list.scrollTop =  this.top 
  },
  methods:{
    onLoad(){
      this.query.page += 1
      this.loading = true
      parklist(this.query).then(res=>{
        console.log(res.data.data)
        if(res.data.length==0){
          this.loading = false
          this.finished = true
          this.refreshing = false
          this.list = []
          return
        }
        if(this.query.page==1){
          this.list = res.data.data
        }else{
          this.list = this.list.concat(res.data.data)
        }
        this.loading = false
        this.refreshing=false
        if(res.data.per_page<=this.query.page){
          this.finished = true
        }
      })
    },
    change(query){
      this.finished = false
      this.query = query
      this.query.page = 0
      this.list = []
      this.onLoad()
    },
    onRefresh() {
      this.finished = false;
      this.query.page = 0
      this.onLoad();
    },
    toDetail(item){
      this.top = this.$refs.page_list.scrollTop
      this.$router.push({name:'parkDetail',query:{id:item.id}})
    }
  }
}
</script>
<style lang="scss" scoped>
.zhan{
  height: 100px;
  width: 100%;
}
.m_b4{
  margin-bottom: 4px;
  margin-top: 4px;
}
.page_list{
  height: 100%;
  overflow: auto;
  background: #f3f3f3;
}
.list_item{
  width: calc(100% - 20px);
  margin: 10px 10px;
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  .item_logo{
    max-width: 60px;
    min-width: 60px;
    img{
      width: 100%;
      height: 56px;
      border-radius: 8px;
    }
  }
  .big_t{
    font-size: 16px;
    color: #111;
  }
  .small_t{
    font-size: 14px;
    margin:4px 0;
    img{
      width: 20px;
      position: relative;
      top: 4px;
    }
    .biao_div{
      background: #ff9933;
      color: #fff;
      font-size: 12px;
      height: 14px;
      border-radius: 2px;
      padding: 1.5px 4px;
      margin-left: 4px;
    }
  }
  .info_div{
    width: calc(100% - 130px);
  }
  .fen_div{
    width: 50px;
    color: rgb(209, 0, 0);
    font-size: 14px;
  }
}
.xx_info{
  font-size: 13px;
  margin-top: 10px;
}
</style>